<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../fonts/iconfont.css"/>
<style type="text/css">
	.plunul{
		width:auto;
		height: auto;
	}
	.plunli{
		display: flex;
		display: -webkit-flex;
		background: #fff;
		padding: 1rem 0 1rem 0.5rem;
		position: relative;
	}
	.pinlun-icon{
		width: 3.5rem;
		height: 3.5rem;
		border-radius: 5rem;
		overflow: hidden;
	}
	.pinlin-content{
		flex: 1;
		-webkit-flex: 1;
		padding: 0 0 0 1rem; 
	}
	.plinlun-name{
		color: dodgerblue;
	}
	.plinlun-time{
		font-size: 1.2rem;
		color: #999;
	}
	.plui-txt{
		padding: 0.5rem 0 0 0;
		font-size: 1.5rem;
	}
	.padb5rem{
		padding-bottom: 5rem;
	}
	.input-pl{
		display: block;
		border: 0;
		height:5rem;
		flex: 1;
		padding-left: 1rem;
	}
	.inpufs{
		display: block;
		width:7rem;
		line-height: 5rem;
		text-align: center;
		background:#eee;
	}
	#pubpinglun{
		width: 95%;
		height: 4rem;
		background:#ddd;
		border-radius: 0.4rem;
		text-align: center;
		line-height: 4rem;
		font-size: 1.4rem;
	}
	#footerbar{
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
		/*定义为flexbox的"父元素"*/
	    display: -webkit-box; 
	    display: -webkit-flex;
	    display: flex;
	}
</style>
</head>
<body>
<div class="jcontent padb5rem">
	<ul class="plunul " id="data-list"></ul>
</div>
<div id="footerbar" class="footerbar">
	<a id="pubpinglun"><i class="iconfont icon-fabiaopinglun"></i>&nbsp;&nbsp;发表评论</a>
</div>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/page.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.plusReady(function(){
	window.setTimeout(function(){
		inits();
	},360);
});

function inits(){
	loaFn();
	_currentWebview=plus.webview.currentWebview();
	//滚动到底部
	document.addEventListener( "plusscrollbottom",function(){
		loadUtil.scrollBottom();
	}, false );
	
	//下拉加载最新数据 
	_currentWebview.setPullToRefresh(webapp.config.pullRefresh,function(){
		loadUtil.pullToRefresh();
	});
	
	mui('#footerbar').on('tap','#pubpinglun', function() {
		addPinglun();
	});
}

function addPinglun(){
	webapp.openByTpl2({
		title:"发布评论",
		hrefs:"/tpl/addpinglun.html?id="+webapp.GetQueryString("id")
	});
}
		
function loaFn(){
	loadUtil.loadList({
		url:"/carLife/common/interface/comment/selectByPage",
		data:{
			targetId:webapp.GetQueryString("id"),
			type:1 
		}
	});
}

window.addEventListener("refreshList", function(e) {
	loadUtil.pullToRefresh();
	plus.webview.getTopWebview().hide("auto");
});
	
</script>
	<!--以下模板-->
<script  id="tpl-list" type="text/html">
	{{each data as item i}}
	<li class="plunli line-b" data-id="{{item.id}}">
		{{if item.headPortrait== null}}
		<div class="pinlun-icon"><img src="../img/zw.png" class="img"/></div>
		{{else}}
		<div class="pinlun-icon"><img src="{{imgPath}}{{item.headPortrait}}" class="img"/></div>
		{{/if}}
		<div class="pinlin-content">
			<div class="plinlun-name">{{item.createUser}}</div>
			<div class="plinlun-time">{{item.timeGrade}}</div>
			<div class="plui-txt">
				{{item.content}}
			</div>
		</div>
	</li> 
	{{/each}}
</script>
</body>
</html>
